<!DOCTYPE html>
<html>
<head>
   {include file="public/head"}
    <style>
        .grids-item{padding: 6px 0;}.dt{color: #999;}.list{display: block;border-bottom: 1px solid #999;}
        .grids-item:before{content: none!important;}.grids-item:after{content: none!important;}
        .m-grids-2:before{content: none!important;}
        .trade-img{width: 28px;height: 28px;position: absolute;top: 0;}
        .unit-price{color: #EF4F4F;}.pay{color: #04BE02;}
    </style>
</head>
<body>
<div class="g-flexview">
    <header class="m-navbar">
        <i class="back-ico"></i>
        <div class="navbar-center"><span class="navbar-title">交易中心</span></div>
    </header>
    <div class="g-scrollview">
        <div id="J_Tab" class="m-tab">
            <ul class="tab-nav">
                <li class="tab-nav-item tab-active"><a href="javascript:;">出售</a></li>
                <li class="tab-nav-item"><a href="javascript:;">求购</a></li>
            </ul>
            <div class="m-slider" id="J_Slider" style="height: 40px;line-height: 40px;padding-left: 20px;color: red;">
                <div class="slider-wrapper">
                    <div class="slider-item">
                        <a href="#">今日华币 | {:getStartPrice()}元 -- {:getEndPrice()}元</a>
                    </div>
                </div>
            </div>
            <div class="tab-panel" id="J_List">
                <div class="tab-panel-item tab-active">
                    <div class="m-cell">
                        <div class="cell-item">
                            <div class="cell-right">
                                <i class="icon-search"></i>
                                <input type="text" class="cell-input" placeholder="请输入要搜索的内容"/>
                                <a href="javascript:;" class="btn btn-primary">搜索</a>
                            </div>
                        </div>
                    </div>
                    <div class="data" id="J_ListContent">
                        {volist name="sell" id="index"}
                        <a href="/index/trade/buy?id={$index.id}" class="list">
                            <div class="m-grids-2">
                                <div class="grids-item" id="g">
                                    <img src="{:getInfo($index.user_id)['avatar']}" alt="" class="trade-img">
                                    <div class="grids-txt">{:getInfo($index.user_id)['nickname']}</div>
                                </div>
                                <div class="grids-item">
                                    <div class="grids-txt dt">{$index.add_time|date="Y-m-d H:i:s",###}</div>
                                </div>
                            </div>
                            <div class="m-grids-2">
                                <div class="grids-item">
                                    <div class="grids-txt">HX币 {$index.money}</div>
                                </div>
                                <div class="grids-item">
                                    <div class="grids-txt unit-price">单价 <b>￥{$index.unit_price}</b></div>
                                </div>
                            </div>
                            <div class="m-grids-2">
                                <div class="grids-item">
                                    <div class="grids-txt pay">支付宝,微信,银联</div>
                                </div>
                                <div class="grids-item">
                                    <div class="grids-txt">
                                        <button type="button" class="btn btn-primary">出售</button>
                                    </div>
                                </div>
                            </div>
                        </a>
                        {/volist}
                    </div>
                </div>
                <div class="tab-panel-item" title="求购">
                    <div class="m-cell">
                        <div class="cell-item">
                            <div class="cell-right">
                                <i class="icon-search"></i>
                                <input type="text" class="cell-input" placeholder="请输入要搜索的内容" />
                                <a href="javascript:;" class="btn btn-primary">搜索</a>
                            </div>
                        </div>
                    </div>
                    <div class="data">
                        {volist name="buy" id="index"}
                        <a href="/index/trade/sell?id={$index.id}" class="list">
                            <div class="m-grids-2">
                                <div class="grids-item" id="g">
                                    <img src="{:getInfo($index.user_id)['avatar']}" alt="" class="trade-img">
                                    <div class="grids-txt">{:getInfo($index.user_id)['nickname']}</div>
                                </div>
                                <div class="grids-item">
                                    <div class="grids-txt dt">{$index.add_time|date="Y-m-d H:i:s",###}</div>
                                </div>
                            </div>
                            <div class="m-grids-2">
                                <div class="grids-item">
                                    <div class="grids-txt">HX币 {$index.money}</div>
                                </div>
                                <div class="grids-item">
                                    <div class="grids-txt unit-price">单价 <b>￥{$index.unit_price}</b></div>
                                </div>
                            </div>
                            <div class="m-grids-2">
                                <div class="grids-item">
                                    <div class="grids-txt pay">支付宝,微信,银联</div>
                                </div>
                                <div class="grids-item">
                                    <div class="grids-txt">
                                        <button type="button" class="btn btn-primary">求购</button>
                                    </div>
                                </div>
                            </div>
                        </a>
                        {/volist}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {include file="public/tabbar" trade="tabbar-active"}
    <script type="javascript" src="/static/js/template.js"></script>
</div>
{include file="public/js"}
<script type="text/html">
    {{each list as index}}}
    <a href="/index/trade/tradeDetail?id={{index.id}}" class="list">
        <div class="m-grids-2">
            <div class="grids-item" id="g">
                <img src="#" alt="" class="trade-img">
                <div class="grids-txt">{{index.nickname}}</div>
            </div>
            <div class="grids-item">
                <div class="grids-txt dt">{{index.add_time}}</div>
            </div>
        </div>
        <div class="m-grids-2">
            <div class="grids-item">
                <div class="grids-txt">HX币 {{index.money}}</div>
            </div>
            <div class="grids-item">
                <div class="grids-txt unit-price">单价 <b>￥{{index.unit_price}}</b></div>
            </div>
        </div>
        <div class="m-grids-2">
            <div class="grids-item">
                <div class="grids-txt pay">支付宝,微信,银联</div>
            </div>
            <div class="grids-item">
                <div class="grids-txt">
                    <button type="button" class="btn btn-primary">求购</button>
                </div>
            </div>
        </div>
    </a>
    {{/each}}
</script>
<script>
    !function ($) {
        var $tab = $('#J_Tab');
        $tab.tab({
            nav: '.tab-nav-item',
            panel: '.tab-panel-item',
            activeClass: 'tab-active'
        });

        $tab.find('.tab-nav-item').on('open.ydui.tab', function (e) {
            if (e.index == 0) {
                console.log('请求出售清单的请求');
            }else {
                console.log('请求新的求购单的请求');
            }
            console.log('索引：%s - [%s]正在打开', e.index, $(this).text());
        });

        $tab.find('.tab-nav-item').on('opened.ydui.tab', function (e) {
            console.log('索引：%s - [%s]已经打开了', e.index, $(this).text());
        });

        $('#J_Slider').slider({
            speed: 1000,
            autoplay: 2000,
            lazyLoad: true,
        });
    }(jQuery);
</script>
<!--  下拉刷新加载数据   -->
<script type="text/html">
    $('#J_List').pullRefresh({
        initLoad: true,
        loadFunction: function () {
            var def = $.Deferred();
            $.ajax({
                url: '/index/trade/index',
                dataType: 'json',
                success: function (ret) {
                    /* 假设ret.list为后端返回的列表数组 */
                    //$('#J_ListContent').prepend(ret.list + '将数据拼接成html');
                    //var tipStr = ret.length > 0 ? '为您更新了' + ret.length + '条内容' : '已是最新内容';
                    YDUI.dialog.toast('更新了', 'none', 1500);
                    /* 处理完后调用resolve()方法 */
                    def.resolve();
                }
            });
            return def.promise();
        }
    });
</script>
</body>
</html>